/*
作用：运动函数的封装
参数：
	elem： 要运动的html元素
	json： 运动的html元素上的哪些css属性和目标值
			attr： 运动html元素上的哪个css属性
			target： css属性的目标值
示例：
	startMove(div1, "left", 800)    //div1.style.left      elem.style[attr]
*/ 

function startMove(elem, json, callback){
	// 先停止定时器
	clearInterval(elem.timer);
	// 然后启动定时器
	elem.timer = setInterval(function(){
		// 先假设每一个属性都已经走到了目标值
		var flag = true;
		// 因为多属性同时运动，所以写循环
		for( var attr in json ){		
			// 求元素当前值
			//var v = getStyle(elem, attr);
			var v = getComputedStyle(elem)[attr]; // 返回值含单位，所以要去掉单位
			if( attr==="opacity" ){
				v = Math.round(v*100);
			}else{
				v = parseInt(v); // 去掉px
			}
			// 求目标值
			var target = json[attr];
			
			// 求步长值：策略（目标值-当前值）/6
			var step = (target - v) / 6;
			
			if( step>0 ){
				step = Math.ceil(step);
			}else{
				step = Math.floor(step);
			}
			//console.log(step);
			// 更新
			if( attr === "opacity" ){
				elem.style[attr] = (v+step)/100;
			}else{
				elem.style[attr] = v+step+"px";
			}
			// 在众多的属性中，只要有1个属性没有到达目标值，那么flag就为假
			if( v != target ){
				flag = false;
			}
			
		}	
		// 循环结束后，flag依然为真时，我们认为所有属性都达到了目标值
		// 停止定时器
		if( flag ){
			clearInterval(elem.timer);
			// 执行回调函数（链式运动）
			if( callback ){
				callback();
			}
		}	
			
		
	}, 30);
}



// 获取非行间样式
function getStyle(elem, attr){
	// 如果浏览器支持getComputedStyle这个方法，使用这个方法获取非行间样式
	if( window.getComputedStyle ){
		return getComputedStyle(elem)[attr];
	}else{	// 如果浏览器是低版本IE的话，使用IE兼容方法获取非行间样式	
		return elem.currentStyle[attr];
	}
}




// 抛物线运动
/*
function parabola(elem, targetX, targetY){
	// 起点
	var originX = elem.offsetLeft;
	var originY = elem.offsetTop;
	// 终点
	// 公式
	// y = axx + bx + c

	var x = targetX - originX;
	var y = targetY - originY;
	var a = 0.002;
	var c = 0;
	var b = (y-a*x*x-c)/x;

	// 抛物线
	var _x=0;
	var timer = setInterval(function(){
		_x++;
		var _y = a * _x * _x + b * _x + c;
		// 更新
		elem.style.left = originX+_x+"px";
		elem.style.top = originY+_y+"px";
		// 到达终点停下来
		if( elem.offsetLeft == targetX ){
			clearInterval(timer);
		}
	}, 10);	
}
*/

function parabola(elem, targetX, targetY, callback){
	// 起点
	var originX = elem.offsetLeft;
	var originY = elem.offsetTop;
	// 终点
	// 公式
	// y = axx + bx + c

	var x = targetX - originX;
	var y = targetY - originY;
	var a = 0.0005;
	var c = 0;
	var b = (y-a*x*x-c)/x;

	// 抛物线
	var _x=0;
	var timer = setInterval(function(){
		// 步长：(目标值-当前值)/6
		var step = (targetX-elem.offsetLeft)/6;
		
		_x+= step;
		var _y = a * _x * _x + b * _x + c;
		// 更新
		elem.style.left = originX+_x+"px";
		elem.style.top = originY+_y+"px";
		// 到达终点停下来
		if( elem.offsetLeft == targetX ){
			clearInterval(timer);
			if( callback ){
				callback();
			}
		}
	}, 50);	
}